import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { TabPage , routeBackToUpperlevel} from 'weaver-mobile-page';
import { Tools } from 'weaver-mobile';
import MemberDetail from './memberDetail'

const getLabel = Tools.getLabel;

@routeBackToUpperlevel
@inject('viewMeetingStore')
@withRouter
@observer
class MemberData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      span: [4,1],
      nowTab:0
    };
  }
  componentDidMount() {
    //param[0:总人数,1:确定参加,2:不参加,3:未提交回执]
    const { getMemberCount , setState } = this.props.viewMeetingStore;
    let tempMemberPage = parseInt(sessionStorage.meetingMemberNowTab,10);
    let tempMemberType = parseInt(sessionStorage.meetingMemberType,10);
    setState({memberType:tempMemberType,selectType:tempMemberPage})
    this.setState({nowTab:tempMemberPage})
    this.getMemberData(tempMemberPage);
    getMemberCount();
  }

  componentWillReceiveProps (nextProps) {
    const prePath = this.props.location.pathname;
    const curPath = nextProps.location.pathname;
    if (curPath && curPath !== prePath) {
      if(curPath.indexOf('receiptForm') < 0 ){
        this.setPage(curPath);
      }
    }
  }

  //因为用的是二级路由,所以在跳转的时候是会走wilreceive的方法的,为了在返回的时候也可以调用方法,所以将获取数据放到这里
  setPage = (path) => {
    const { getMemberCount } = this.props.viewMeetingStore;
    if (path.indexOf('/calendar/detail/member/memberData/allMember') > -1) { 
      this.setState({ nowTab: 0 });
      this.getMemberData(0);
      getMemberCount(); 
      sessionStorage.setItem("meetingMemberNowTab",0);
    }
    if (path.indexOf('/calendar/detail/member/memberData/attend') > -1) { 
      this.setState({ nowTab: 1 });
      this.getMemberData(1);
      getMemberCount(); 
      sessionStorage.setItem("meetingMemberNowTab",1);
    }
    if (path.indexOf('/calendar/detail/member/memberData/unAttend') > -1) { 
      this.setState({ nowTab: 2 });
      this.getMemberData(2);
      getMemberCount(); 
      sessionStorage.setItem("meetingMemberNowTab",2);
    }
    if (path.indexOf('/calendar/detail/member/memberData/unWrite') > -1) {
      this.setState({ nowTab: 3 });
      this.getMemberData(3);
      getMemberCount(); 
      sessionStorage.setItem("meetingMemberNowTab",3);
    }
      
  }


  getMemberData = (key) =>{
    const { setState, getMember } = this.props.viewMeetingStore;
    setState({selectType:key})
    getMember();
    
  }

     // 点击tab页切换
   changeTab = (tab,index) => {
    //param[0:总人数,1:确定参加,2:不参加,3:未提交回执]
    // const { getMemberCount } = this.props.viewMeetingStore;
    // getMemberCount();
    // this.getMemberData(tab.key);
    switch(tab.key) {
      case 0: this.setPath(index, '/calendar/detail/member/memberData/allMember'); sessionStorage.setItem('meetingMemberNowTab',0);break;
      case 1: this.setPath(index, '/calendar/detail/member/memberData/attend'); sessionStorage.setItem('meetingMemberNowTab',1);break;
      case 2: this.setPath(index, '/calendar/detail/member/memberData/unAttend'); sessionStorage.setItem('meetingMemberNowTab',2);break;
      case 3: this.setPath(index, '/calendar/detail/member/memberData/unWrite'); sessionStorage.setItem('meetingMemberNowTab',3);break;
      default: return;
    }
  }

  setPath = (key, path) => {
    this.props.history.push(path);
  }

  getTopTabs = ()=>{
    const { memberDetailCount } = this.props.viewMeetingStore;
    let { memberType } = this.props;
    let tabs = [];
    const cardInfo = [
        {title: memberType==='1'?getLabel(2166, '应到人数'):getLabel(391077, '应到客户经理'),key:0 , color:'#333333',countFlg:'allAttend'},
        {title: getLabel(391078, '确定参加'),key:1, color:'#55B1F9',countFlg:'attend'},
        {title: getLabel(389541, '不参加'),key:2, color:'#FE9900',countFlg:'unAttend'},
        {title: getLabel(391079, '未提交回执'),key:3 , color:'#999999',countFlg:'unWrite'},
    ];
    // const { counts } = this.props.wfStatusStore;
    tabs = cardInfo.map(item =>{
        const key = item.key;
        const tab = (
            <div>
                <div style={{color:item.color,height:'15px',textAlign:'center'}}>{memberDetailCount[`${item.countFlg}`]}</div>
                <div style={{color:"#868686"}}>{item.title}</div>
            </div>
        )
        return {key:key, title: tab};
    });
    return tabs;
  }

  render() {
    let tabTemp = this.getTopTabs();
    const tabProps = {
      onChange: (tab,index) => { this.changeTab(tab,index) },
      page:this.state.nowTab,
      
    };
    return (
      <div className={'member-data-contain'}>
        <TabPage
          tabs={tabTemp}
          tabProps={tabProps}
        />
        <Switch>
          <Route
            key="allMember"
            path="/calendar/detail/member/memberData/allMember"
            render={()=>(
              <MemberDetail />
            )}
          />
          <Route
            key="attend"
            path="/calendar/detail/member/memberData/attend"
            render={()=>(
              <MemberDetail />
            )}
          />
          <Route
            key="unAttend"
            path="/calendar/detail/member/memberData/unAttend"
            render={()=>(
              <MemberDetail />
            )}
          />
          <Route
            key="unWrite"
            path="/calendar/detail/member/memberData/unWrite"
            render={()=>(
              <MemberDetail />
            )}
          />
          </Switch>
      </div>
    )
  }
}

export default MemberData;